import React, { useState } from 'react';
import './RightFixed.css';
import Char from '../../pages/char/char'

function RightFixed() {
  const [show, setShow] = useState(false);
  const [highlightedIndex, setHighlightedIndex] = useState(null);
  const [isCharVisible, setIsCharVisible] = useState(false); // 控制 Char 组件的显示和隐藏

  const handleMouseEnter = () => {
    setShow(true);
  };

  const handleMouseLeave = () => {
    setShow(false);
    setHighlightedIndex(null);
  };

  const handleButtonMouseEnter = (index:any) => {
    setHighlightedIndex(index);
  };

  const handleButtonMouseLeave = () => {
    setHighlightedIndex(null);
  };

  const handleOnlineServiceClick = () => {
    setIsCharVisible(prevState => !prevState); // 使用函数式更新
  };

  const handleCharClose = () => {
    setIsCharVisible(false);
  };

  return (
    <div
      className='right-fixed'
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <p>?</p>
      {show && (
        <div className='box11'>
          <button
            className={highlightedIndex === 0 ? 'highlight111' : ''}
            onMouseEnter={() => handleButtonMouseEnter(0)}
            onMouseLeave={handleButtonMouseLeave}
          >
            意见反馈
          </button>
          <button
            className={highlightedIndex === 1 ? 'highlight111' : ''}
            onMouseEnter={() => handleButtonMouseEnter(1)}
            onMouseLeave={handleButtonMouseLeave}
            onClick={handleOnlineServiceClick}
          >
            在线客服
          </button>
          <button
            className={highlightedIndex === 2 ? 'highlight111' : ''}
            onMouseEnter={() => handleButtonMouseEnter(2)}
            onMouseLeave={handleButtonMouseLeave}
          >
            新手教程
          </button>
          <button
            className={highlightedIndex === 3 ? 'highlight111' : ''}
            onMouseEnter={() => handleButtonMouseEnter(3)}
            onMouseLeave={handleButtonMouseLeave}
          >
            提交模版需求
          </button>
        </div>
      )}
      {isCharVisible && <Char onClose={handleCharClose} />}
    </div>
  );
}

export default RightFixed;